<template>
    <!-- 待签订合同 -->
    <div class="subcontractList padding-page ps-a workers">

        <el-table :data="tableData" class="m-t-20" style="width: 100%" height="74%">
            <el-table-column
                prop="detailsTimeInfo.rejectionDate"
                label="驳回日期"
                width="180">
            </el-table-column>
            <el-table-column
                prop="projectName"
                label="项目"
                width="180">
            </el-table-column>
            <el-table-column
                prop="contractId"
                label="合同编号"
            >
            </el-table-column>
            <el-table-column
                prop="originatorName"
                label="工人"
                width="180">
            </el-table-column>
            <el-table-column
                label="操作"
            >
                <template slot-scope="scope">
                    <el-button type="text" @click="showDetails(scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="m-t-20 ta-c tt-a">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <!-- 合同预览 -->
        <cDetails v-if="detailsShow" :pdfUrl="pdfUrl">
            <template>
                <div>
                    <span>
                        工人: {{detailsForm.originatorName}}
                    </span>
                    <span>
                        合同编号: {{detailsForm.contractId}}
                    </span>
                    <span>
                        驳回日期: {{detailsForm.contractRejectionDate}}
                    </span>
                </div>
                <div>
                    <el-button @click="cal">返回</el-button>
                </div>
            </template>
        </cDetails>
    </div>
</template>
<script>
import cDetails from "../../../components/details";
import {QueryProjectSignContractDetailedInfoList, QueryContractFileDetails} from '@/api/contract/workers'
import { mapGetters } from 'vuex'
export default {
    components: { cDetails },
    computed: {
        ...mapGetters([
            'userId',
            'currId',
            'roleId'
        ])
    },
    data() {
        return {
            tableData: [],
            currentPage: 1,   // 当前页
            pageSize: 10,     //每页多少条
            total: 0,          // 总数量
            detailsShow: false,
            detailsForm: {},
            pdfUrl: ''
        }
    },
    methods: {
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.currentPage = 1
            this.init()
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.currentPage = val
            this.init()
        },
        // 查看详情
        showDetails(row) {
            console.log('查看详情',row);
            this.detailsForm = row;
			const data = {
				contractId : row.contractId
			}
			console.log(data)
            QueryContractFileDetails(data).then(res => {
                console.log(res)
                if (res.code == '0') {
                	if (res.data.result[0].detailsUrlInfo.contractUrl != null) {
                		this.detailsShow = true;
                		this.pdfUrl = res.data.result[0].detailsUrlInfo.contractUrl;
                	} else {
                		this.$message.info('contractUrl为空');
                	}
                
                }
            })
        },
        // 合同取消
        cancel() {
            this.detailsShow = false;
        },
        init() {
            const { projectId, projectName} = this.$route.query
            const data = {
                userId: this.userId,
                roleId: this.roleId,
                currId: this.currId,
                projectId,
                contractStatus: 5,
                projectName,
                pageFlag: 1,         //是否启用分页
                currentPage: this.currentPage,      //当前页
                queryNumber: this.pageSize 
            }
            QueryProjectSignContractDetailedInfoList(data).then(res => {
				for (var i = 0; i < res.data.result.length; i++) {
					res.data.result[i].projectName = projectName;
				}
                if(res.code == '0') {
                    this.tableData = res.data.result;
                    this.total = res.data.resultTotal
                }
            })
        },
        // 关闭
        cal() {
            this.detailsShow = false;
        }
    },
    created() {
        this.init()
    }
}
</script>
<style lang="scss">
    .subcontractList {
        background: #fff;
        z-index: 12;
    }
    .body_header {
        display: flex;
        padding-bottom: 10px;
        border-bottom: 1px solid #d8dce5;
        .list {
            min-width: 200px;
            height: 50px;
            line-height: 50px;
            margin-right: 50px;
            font-size: 18px;
        }
    }
    .pagination {
        width: 100%;
    }
</style>